<template>
	<view class="page_index-ticket-list-page">
		<common-header :isCanBack="true" titleName=" " :className="headerClassName"></common-header>
		<view class="container">
			<view class="top_swiper">
				<swiper class="swiper">
					<swiper-item v-for="(item, index) in swiperTopList" :key="index">
						<view class="swiper-item">
							<!-- <image :src="img_baseUrl + item"></image> -->
							<image :src="img_baseUrl + item"></image>
						</view>
					</swiper-item>
				</swiper>
				<view class="swiper_dots">
					<view><text class="dot_now">{{showDot}}</text>/{{swiperTopList.length}}</view>
				</view>
			</view>
			<view class="detail_wrap">
				<view class="titBox">
					<view class="titBox_lf">
						<!-- <view class="ticket-name">{{ info.ticketName }}</view> -->
						<view class="ticket-name">{{ detail.name }}</view>
						<view class="tit_item">
							<!-- <text>{{ info.ticketLabel }}</text> -->
							<text v-if="detail.label">{{ detail.label}}</text>
						</view>
					</view>
					<view class="titBox_rt" :style="{backgroundImage: `url(${img_baseUrl}/statics/std/static/new/recom.png)`}">
						<!-- <text>{{ info.starDetail }}</text> -->
						<text>{{ detail.starDetail }}</text>
					</view>
				</view>
				<view class="locBox" :style="{backgroundImage: `url(${img_baseUrl}/statics/std/static/introduction-detail-position-bg.png)`}" @click="goToMap">
					<view class="locBox_lf">
						<!-- <text>{{ info.addressDetails }}</text> -->
						<text>{{ detail.addressDetails }}</text>
						<view>{{ currDistance }}</view>
					</view>
					<view class="locBox_rt">
						<img :src="`${img_baseUrl}/statics/std/static/new/introduction-detail-position-location.png`"alt="" />
						<text>去这里</text>
					</view>
				</view>
				<view class="times">
					<view class="time_tit">游览时间</view>
					<view class="boxs">
						<view class="time_box">
							<view class="item" :class="{
                  full: item.stockResidue === 0,
                  selected: selectedTourTime == item.stockDate,
                }" v-for="(item, index) in tourTime || []" :key="index" @click.stop="selectTourTime(item)">
								<view class="today">{{ item.week }}</view>
								<view class="date">{{ item.stockDate | filterDate }}</view>
							</view>
							<view v-if="showMore" class="showMore" @click="showCalendar">
								<text>更多日期</text>
								<img :src="`${img_baseUrl}/statics/std/static/go.png`" alt="" />
							</view>
						</view>
					</view>
				</view>
				<view class="times">
					<view class="time_tit">可选门票</view>
					<view
            class="tic_item"
            v-for="(item, index) in voList"
            :key="index"
          >
            <view class="tic_top">
              <view class="toc_type">{{ item.ticketName }}</view>
              <view class="toc_pri">
                <img :src="`${img_baseUrl}/statics/std/static/price.png`" alt="" />
                <text class="pric">{{ item.ticketPrice }}</text>
              </view>
            </view>
            <view class="not_txt" v-if="item.typeName === '学生票'"
              >{{item.riskWarningDetails}}</view>
            <view class="tic_bot">
              <view class="tic_not" @click.stop="openPopup(item.riskWarningDetails)">
                <text>购买须知</text>
                <img :src="`${img_baseUrl}/statics/std/static/go.png`" alt="" />
              </view>
              <number-box
                :min="0"
                :max="item.maxOrderNum"
				:disabled="(new Date(item.releaseTicketStartDate).getTime() - new Date().getTime() > 0) || (!canChooseOther && item.num === 0)"               
				:value="item.num"
        @input="inputNum(index, $event)"
                :buttonSize="64"
              />
            </view>
          </view>
        </view>
					<view class="tabs">
						<v-tabs :tabs="tabs" @changeType="changeType" :showMore="false" :selected="activeTab" />
					</view>
					<view class="description">
						<mp-html :content="description" />
					</view>
				</view>
				<view class="btns">
					<view class="btn_lf">
						<text>总价</text>
						<img :src="`${img_baseUrl}/statics/std/static/price.png`" alt="" />
						<text class="price">{{ totalPrice }}</text>
					</view>
					<view class="btn_rt" :class="{ disable: contTickerNumber == 0 }" @click="confirmReverse">去下单</view>
				</view>
			</view>

			<!--      证件信息弹框-->
			<uni-popup ref="popup" type="bottom" :backgroundColor="'#ffffff'" :transStyle="{
        borderTopLeftRadius: '40rpx',
        borderTopRightRadius: '40rpx',
        overflow: 'hidden',
      }">
				<view class="popup-content">
					<view class="title">
						购买须知
						<image :src="`${img_baseUrl}/statics/std/static/delete2.png`" @click="closePopup">
						</image>
					</view>
					<view>{{showText || ''}}</view>
				</view>
			</uni-popup>
      <!-- 日历弹窗 -->
      <bruce-calendar ref="bruceCalendar" 
        :insert="false" 
        :clearDate="false" 
        :startDate="startDate" 
        :endDate="endDate" 
        :selected="selectedCalendar"
        @confirm="confirm"
      ></bruce-calendar>
		</view>
	</view>
</template>

<script>
	import commonHeader from "@/components/commonHeader.vue";
	import vTabs from "@/components/tabs.vue";
	import mpHtml from "mp-html/dist/uni-app/components/mp-html/mp-html";
	import requestPost, {
		requestGet
	} from "@/utils/request";
	import dayjs from "dayjs";
	import uniPopup from "@/components/uni-popup/uni-popup.vue";
  import bruceCalendar from '@/components/bruce-calendar/bruce-calendar.vue';
	import numberBox from "../../components/number-box.vue";
	import {
		currentPosition,
		distance
	} from '@/utils/index.js';

	export default {
		components: {
			numberBox,
			commonHeader,
			vTabs,
			mpHtml,
			uniPopup,
      bruceCalendar
		},
		props: ["id", "type"],
		data() {
			return {
				xqArr: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
				img_baseUrl: process.env.VUE_APP_BASEURL_IMG_API,
				headerClassName: "",
				detail: {},
				activeTab: "introduceDetails",
				tabs: [{
						label: "introduceDetails",
						text: "景点介绍",
					},
					// {
					//   label: "tourVos",
					//   text: "攻略",
					// },
					{
						label: "touristNotice",
						text: "游玩须知",
					},
				],
				selectedTourTime: "",
				voList: [], //可选票重数组
				currDistance: '',
				startDate: null,
				endDate: null,
				tourTime: [],
				showText: null,
				showMore: false,
        selectedCalendar: [],
		showDot: 1
			};
		},
		computed: {
			swiperTopList() {
				// return this.detail.ticketPics || [];
				return this.detail.pics || [];
			},
			info() {
				const info = this.detail.ticketDetailVo || {};
				info.starDetail = (+info.starDetail)?.toFixed(1);
				return info;
			},
			description() {
				return this.detail[this.activeTab] ? this.detail[this.activeTab].split("\t").join(
					"&nbsp;&nbsp;&nbsp;&nbsp;") : '';
			},
			totalPrice() {
				let sum = this.voList.reduce(
					(accumulator, currentValue) =>
					accumulator + currentValue.ticketPrice * currentValue.num,
					0
				);
				return sum.toFixed(2);
			},
			contTickerNumber() {
				let sum = this.voList.reduce(
					(accumulator, currentValue) => accumulator + currentValue.num,
					0
				);
				console.log(sum);
				return sum;
			},
      canChooseOther(){
        const chooseLength = this.voList.filter((item) => item.num > 0).length;
        return chooseLength > 0 ? false : true
      }
		},
		filters: {
			filterDate: function(value) {
				if (!value) return "";
				return dayjs(value).format("MM月DD日");
			},
		},
		mounted() {
			if (this.id) {
				this.getDetail();
			}
		},
		methods: {
			changeAct(e) {
				this.showDot = e.detail.current
			},
      inputNum(index, $event){
        console.log('input-value', index, $event)
        this.$set(this.voList[index], 'num', $event)
      },
      showCalendar(){
        this.$refs.bruceCalendar.open();
      },
      confirm(e) {
        console.log('confirm=============', e.fulldate);
        // this.selectedTourTime = e.fulldate;
        this.selectTourTime({stockDate: e.fulldate});
      },
			getDetail() {
				requestGet(`/ticket/attribute/applet/detail/${this.id}`).then((res) => {
					console.log('获取了活动详情', res)
					if (res.code === 200) {
						this.startDate = res.data.start
						this.endDate = res.data.end
						const days = Math.ceil(Math.abs(new Date(res.data.end) - new Date(res.data.start)) /
							86400000)
						console.log('这是几天', dayjs(res.data.start).add(1, 'day').format('YYYY-MM-DD'))
						if (days > 3) {
							for(var i = 0; i < 3; i++) {
								this.tourTime.push({
									week: this.xqArr[dayjs(res.data.start).add(i, 'day').day()],
									stockDate: dayjs(res.data.start).add(i, 'day').format('YYYY-MM-DD')
								})
							}
							this.showMore = true
							console.log('this.tourTime', this.tourTime)
              for(var i = 0; i <= days; i++) {
              	this.selectedCalendar.push({
              		info: '可订',
                  // color: '#5F6F86',
              		date: dayjs(res.data.start).add(i, 'day').format('YYYY-MM-DD')
              	})
              }
						} else {
							for(var i = 0; i < days; i++) {
								this.tourTime.push({
									week: this.xqArr[dayjs(res.data.start).add(i, 'day').day()],
									stockDate: dayjs(res.data.start).add(i, 'day').format('YYYY-MM-DD')
								})
							}
						}
						if (this.tourTime.length) {
							this.selectTourTime(this.tourTime[0])
						}
						this.selectedTourTime = res.data.start
						// const detail = res.data || {};
						// detail.tourTime = detail.tourTime || [];
						// detail.tourTime.forEach((item) => {
						//   item.selected = false;
						//   (item.voList || []).forEach((v) => (v.num = 0));
						// });
						this.detail = res.data;
						// this.voList = res.data.tourTime[0]?.voList || [];
						// this.selectedTourTime = res.data.tourTime[0]?.stockDate || "";
						// this.getDistance();
					} else {}
				});
			},
			selectTourTime(item) {
				this.voList.map(val => val.num = 0)//选择的门票数置为0
				this.selectedTourTime = item.stockDate;
				requestPost('/ticket/attribute/applet/attributeList', {
					"stockDate": item.stockDate,
					"ticOtherId": this.id
				}).then((res) => {
					this.voList = res.data.map(val => Object.assign(val, {num: 0}))
					console.log('这是选择得日期票添加了num属性', this.voList)
				})
				// 切换票种数组
				// if (item.stockResidue == 0) {
				// 	//库存为0时，门票不可购买逻辑
				// 	item.voList.map(v => Object.assign(v, {
				// 		canSel: false
				// 	}))
				// 	console.log('是库存为0 啊', item.voList)
				// 	this.voList = item.voList || [];
				// } else {
				// 	item.voList.map(v => Object.assign(v, {
				// 		canSel: true
				// 	}))
				// 	this.voList = item.voList || [];
				// }
			},
			changeType(e) {
				this.activeTab = e.type;
			},
			onPageScroll(e) {
				if (e.scrollTop > 100) {
					this.headerClassName = "headerClass";
				} else {
					this.headerClassName = "";
				}
			},
			// add_num(item, index) {
			//   item.num += 1;
			//   this.$set(this.voList[index], "num", item.num);
			//   console.log(item);
			// },
			// reduce_num(item, index) {
			//   if (item.num === 1) {
			//     uni.showToast({
			//       title: "至少选择一张",
			//       icon: "none",
			//     });
			//     return;
			//   }
			//   item.num -= 1;
			//   this.$set(this.voList[index], "num", item.num);
			// },
			openPopup(txt) {
				this.$refs.popup.open();
				this.showText = txt
			},
			closePopup() {
				this.$refs.popup.close();
				this.showText = null
			},
			//     确认下单
			confirmReverse() {
				if (this.contTickerNumber == 0) return;
				// 判断是否登录
				const userInfo = uni.getStorageSync("X-UserInfo");
				if (!userInfo) {
					uni.navigateTo({
						url: "/pages/login/index",
					});
					return;
				}
				this.$store.commit("TICKET_RESERVE_INFO", {
					voList: this.voList.filter((item) => item.num > 0),
					time: this.selectedTourTime,
					detail: this.detail,
					type: this.detail.ticketType,
					totalPrice: this.totalPrice,
				});
				uni.navigateTo({
					url: `/page_index/ticket/goBuy?id=${this.id}&type=${this.type}`,
				});
			},
			goToMap() {
				const detail = this.detail;
				if (!detail.latitude || !detail.longitude || detail.latitude == "" || detail.longitude == '') {
					uni.showToast({
						title: "暂无具体位置信息",
						icon: "none",
					});
					return
				}
				uni.openLocation({
					latitude: Number(detail.latitude),
					longitude: Number(detail.longitude),
					name: detail.addressDetails || '',
					address: detail.addressDetails || '',
					success: function() {
						console.log('openLocation=======success', detail);
					},
					fail: function(res) {
						console.log('openLocation=====fail', res);
					}
				});
			},
			async getDistance() {
				let myPosition = null;
				try {
					myPosition = await currentPosition();
				} catch (error) {
					console.log('定位失败:', error);
					return
				}
				console.log('myPositon=====', myPosition);
				if (myPosition.latitude && myPosition.longitude && this.detail.ticketDetailVo.latitude && this.detail
					.ticketDetailVo.longitude) {
					distance(myPosition.latitude, myPosition.longitude, this.detail.ticketDetailVo.latitude, this
						.detail.ticketDetailVo.longitude).then(distance => {
						console.log("distance========", distance)
						this.currDistance = Number(distance) > 1000 ? (Number(distance) / 1000).toFixed(2) +
							'km' : distance + 'm';
					}).catch(err => {
						console.log("distance========err", res)
						this.currDistance = "";
					})
				}
			}
		}
	};
</script>
<style>
  .uni-calendar-item--checked{
    background-color: #3FAA73 !important;
  }
  .uni-calendar-item--isDay{
    background-color: #3FAA73 !important;
    color: #fff !important;
  }
  .uni-calendar-item--isDay-text{
    color: #3FAA73;
  }
</style>
<style lang="scss" scoped>

	.page_index-ticket-list-page {
		box-sizing: border-box;
		min-height: 100vh;
		position: relative;

		.detail_wrap {
			box-sizing: border-box;
			padding: 40rpx 32rpx;
			padding-bottom: calc(104rpx + env(safe-area-inset-bottom) + 40rpx);
			border-radius: 40rpx 40rpx 0rpx 0rpx;
			transform: translateY(-40rpx);
			background: #fff;

			.tabs {
				box-sizing: border-box;
				padding: 12rpx 0;
				margin-top: 40rpx;
				position: relative;
				margin-bottom: 24rpx;

				&:before {
					content: "";
					width: calc(100% + 64rpx);
					height: 1rpx;
					position: absolute;
					left: -32rpx;
					bottom: 0;
					background-color: rgba(0, 0, 0, 0.1);
				}
			}

			.times {
				width: 100%;
				margin-top: 48rpx;

				.tic_item {
					box-sizing: border-box;
					padding: 24rpx;
					background: #f7f9fa;
					border-radius: 24rpx;
					margin-bottom: 16rpx;

					.tic_top {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-bottom: 8rpx;

						.toc_type {
							font-size: 32rpx;
							font-weight: 400;
							color: rgba(0, 0, 0, 0.8);
							line-height: 44rpx;
						}
						
						.toc_pri {
							display: flex;
							align-items: center;
							justify-content: space-between;
						
							image {
								width: 32rpx;
								height: 32rpx;
								display: block;
							}
						
							text {
								font-size: 40rpx;
								font-family: D-DIN-Bold, D-DIN;
								font-weight: 700;
								color: #ff7614;
								line-height: 44rpx;
							}
						}


					}

					.not_txt {
						font-size: 28rpx;
						font-weight: 400;
						color: #777f8f;
						line-height: 40rpx;
					}

					.tic_bot {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-top: 36rpx;

						.tic_not {
							display: flex;
							align-items: center;
							font-size: 28rpx;
							font-weight: 400;
							color: #5f6f86;

							image {
								width: 32rpx;
								height: 32rpx;
								display: block;
							}

							.toc_pri {
								display: flex;
								align-items: center;
								justify-content: space-between;

								image {
									width: 32rpx;
									height: 32rpx;
									display: block;
								}

								text {
									font-size: 40rpx;
									font-family: D-DIN-Bold, D-DIN;
									font-weight: 700;
									color: #ff7614;
									line-height: 44rpx;
								}
							}
						}

						.tic_num {
							display: flex;
							align-items: center;

							image {
								width: 64rpx;
								height: 64rpx;
								display: flex;
							}

							text {
								font-size: 32rpx;
								font-family: D-DIN-Bold, D-DIN;
								font-weight: 700;
								color: #3d3d3d;
								line-height: 34rpx;
								margin: 0 24rpx;
							}
						}
					}
				}

				.time_tit {
					font-size: 32rpx;
					font-weight: 500;
					color: rgba(0, 0, 0, 0.8);
					line-height: 44rpx;
					margin-bottom: 24rpx;
				}

				.boxs {
					width: 100%;
					height: 112rpx;
					overflow-x: scroll;
					display: flex;

					&::-webkit-scrollbar {
						display: none;
					}
				}

				.time_box {
					height: 100%;
					display: flex;
					align-items: center;
					.showMore {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 134rpx;
						height: 112rpx;
						background: #F7F9FA;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						opacity: 1;
						border: 2rpx solid #B7C1CA;
						font-size: 28rpx;
						font-weight: 400;
						color: rgba(0,0,0,0.8);
						line-height: 40rpx;
						box-sizing: border-box;
						padding: 16rpx 0;
						text {
							width: 56rpx;
							margin-right: 8rpx;
						}
						image {
							width: 32rpx;
							height: 32rpx;
							display: block;
						}
					}
					.item {
						width: 176rpx;
						height: 100%;
						background: #f7f9fa;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						box-sizing: border-box;
						padding: 14rpx 16rpx;
						margin-right: 8rpx;
						display: flex;
						flex-direction: column;
						position: relative;
						border: 2rpx solid #B7CABF;

						&::after {
							content: "";
							position: absolute;
							right: -2rpx;
							top: -2rpx;
							color: #87A198;
							width: 64rpx;
							height: 40rpx;
							background: url('../../static/new/cansel.png') no-repeat;
							background-size: 100% 100%;
							// background: #F5F7F6;
							// border-radius: 2rpx 16rpx 2rpx 16rpx;
							// display: flex;
							// align-items: center;
							// justify-content: center;
							// font-size: 24rpx;
						}

						&.full {
							background: #F7F9FA;
							opacity: 0.4;
							border: 2rpx solid rgba(0,0,0,0.1);
							&::after {
								content: "约满";
							}
						}

						&.selected {
							
							border: 2rpx solid #3FAA73;
							&::after {
								// content: "√";
								content: "";
								color: #fff;
								width: 40rpx;
								height: 40rpx;
								// background: #2187ff;
								background: url('../../static/new/sel.png') no-repeat;
								background-size: 100% 100%;
							}
						}

						.today {
							font-size: 28rpx;
							font-weight: 500;
							color: rgba(0,0,0,0.8);
							line-height: 40rpx;
						}

						.date {
							margin-top: 4rpx;
							font-size: 28rpx;
							font-weight: 400;
							color: #777F8F;
							line-height: 40rpx;
						}
					}
				}
			}

			.locBox {
				height: 120rpx;
				// background: url("https://ltjtjingquguanli.com/statics/std/static/introduction-detail-position-bg.png");
				background-size: cover;
				display: flex;
				justify-content: space-between;
				align-items: center;
				box-sizing: border-box;
				padding: 20rpx 24rpx 16rpx;

				.locBox_lf {
					margin-right: 20rpx;
					flex: 1;
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;

					text {
						font-size: 28rpx;
						font-weight: 500;
						color: #5f6f86;
						line-height: 44rpx;
						width: 100%;
						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;
					}

					view {
						font-size: 24rpx;
						font-weight: 400;
						color: #777f8f;
						line-height: 40rpx;
					}
				}

				.locBox_rt {
					width: 172rpx;
					height: 64rpx;
					background: #fff;
					border-radius: 32rpx 32rpx 32rpx 32rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					image {
						width: 32rpx;
						height: 32rpx;
						display: block;
					}

					text {
						font-size: 28rpx;
						font-weight: 400;
						color: #3FAA73;
						line-height: 32rpx;
					}
				}
			}

			.titBox {
				display: flex;
				align-items: baseline;
				margin-bottom: 46rpx;

				.titBox_lf {
					flex: 1;
					margin-right: 32rpx;

					.ticket-name {
						font-size: 40rpx;
						font-weight: 600;
						color: rgba(0, 0, 0, 0.9);
						line-height: 56rpx;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.tit_item {
						margin-top: 8rpx;

						text {
							box-sizing: border-box;
							padding: 4rpx 12rpx;
							height: 40rpx;
							background: rgba(77, 134, 247, 0.102);
							border-radius: 8rpx 8rpx 8rpx 8rpx;
							font-size: 24rpx;
							font-weight: 400;
							color: #777f8f;
							line-height: 32rpx;
							margin-right: 12rpx;
						}
					}
				}

				.titBox_rt {
					width: 108rpx;
					height: 108rpx;
					// background: url("https://ltjtjingquguanli.com/statics/std/static/recom.png") no-repeat;
					background-size: cover;
					font-size: 36rpx;
					font-family: D-DIN-Bold, D-DIN;
					font-weight: 700;
					color: #3FAA73;
					line-height: 40rpx;
					box-sizing: border-box;
					padding: 20rpx 30rpx 0;
				}
			}
		}

		.btns {
			position: fixed;
			bottom: 0;
			width: 100%;
			// height: 104rpx;
			background: #ffffff;
			border-top: 2rpx solid rgba(0, 0, 0, 0.1);
			display: flex;
			// align-items: flex-end;
			justify-content: space-between;
			box-sizing: border-box;
			padding-left: 32rpx;
			padding-right: 32rpx;
			padding-top: 16rpx;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);

			.btn_lf {
				display: flex;
				align-items: center;
				height: 88rpx;

				text {
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.7);
					line-height: 40rpx;
					margin-right: 16rpx;
				}

				image {
					width: 32rpx;
					height: 32rpx;
					display: block;
				}

				.price {
					font-size: 40rpx;
					font-family: D-DIN-Bold, D-DIN;
					font-weight: 700;
					color: #ff7614;
				}
			}

			.btn_rt {
				width: 280rpx;
				height: 88rpx;
				background: #3FAA73;
				border-radius: 44rpx 44rpx 44rpx 44rpx;
				font-size: 32rpx;
				font-weight: 400;
				color: #ffffff;
				line-height: 44rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				&.disable {
					opacity: 0.7;
				}
			}
		}

		.container {
			width: 100%;
			display: flex;
			flex-direction: column;
			box-sizing: border-box;

			.top_swiper {
				position: relative;
				.swiper_dots {
						  position: absolute;
						  bottom: 60rpx;
						  right: 32rpx;
						  background: rgba(0,0,0,0.6);
						  border-radius: 24rpx 24rpx 24rpx 24rpx;
						  view {
							  box-sizing: border-box;
							  padding: 4rpx 16rpx;
							  font-size: 24rpx;
							  font-weight: 400;
							  color: rgba(255,255,255,0.8);
							  line-height: 32rpx;
						  }
						  .now {
							  color: #FFFFFF;
						  }
				}
			}

			swiper.swiper {
				height: 440rpx;
				width: 100%;

				&::v-deep {
					.wx-swiper-dots {
						width: 100%;
						height: 120rpx;
						background: linear-gradient(180deg,
								rgba(0, 0, 0, 0) 0%,
								rgba(0, 0, 0, 0.16) 100%);
						padding-top: 52rpx;
						box-sizing: border-box;
						display: flex;
						align-items: center;
						justify-content: center;
						position: absolute;
						bottom: 0;
					}

					.wx-swiper-dot {
						width: 20rpx;
						height: 4rpx;
						margin: 0 6rpx;
						background: rgba(255, 255, 255, 0.6);
						border-radius: 10rpx;
						opacity: 1;

						&.wx-swiper-dot-active {
							background: #ffffff;
							opacity: 1;
						}
					}
				}

				.swiper-item {
					display: block;
					height: 100%;
					width: 100%;
					line-height: 300rpx;
					text-align: center;

					image {
						height: 100%;
						width: 100%;
					}
				}
			}
		}

		.popup-content {
			background: #ffffff;
			padding: 32rpx;

			.title {
				position: relative;
				font-size: 32rpx;
				font-family: Alibaba PuHuiTi 2-75 SemiBold, Alibaba PuHuiTi 20;
				font-weight: 700;
				color: #3d3d3d;
				line-height: 44rpx;
				text-align: center;

				image {
					position: absolute;
					right: 0;
					top: 0;
					z-index: 1;
					display: block;
					width: 48rpx;
					height: 48rpx;
					cursor: pointer;
				}
			}
		}
	}
</style>